<template>
  <div style="display: flex">
    <div class="page-item" @click="currentChangeHandle(1)">上一页</div>
    <div style="display: flex">
      <div
        class="page-item"
        v-for="(i,index) in pageList"
        :key="index"
        @click="currentChangeHandle(i)"
      >
        {{ i }}
      </div>
    </div>
    <div class="page-item" @click="currentChangeHandle(currentPage + 1)">
      下一页
    </div>
    <div class="page-item" @click="currentChangeHandle(pages)">尾页</div>
  </div>
</template>

<script>
export default {
  computed: {
    pageList() {
      console.log('当前页',this.currentPage);
      console.log('总页数',this.total-5);
      if (this.totalPage <10) {
        return this.totalPage;
      } else {
        if (this.currentPage <= 5) {
          return [1, 2, 3, 4, 5, 6, "...", this.totalPage];
        } else if (this.currentPage >= this.totalPage - 5) {
          return [
            1,
            "...",
            this.totalPage - 6,
            this.totalPage - 5,
            this.totalPage - 4,
            this.totalPage - 3,
            this.totalPage - 2,
            this.totalPage - 1,
            this.totalPage,
          ];
        } else {
          return [
            1,
            "...",
            this.currentPage - 2,
            this.currentPage - 1,
            this.currentPage,
            this.currentPage + 1,
            this.currentPage + 2,
            '...',
            this.totalPage,
          ];
        }
      }
    },
  },
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
    //   default: 1,
    },
    total: {
      type: Number,
    },
    totalPage:{
        type:Number
    }
  },
  methods: {
    currentChangeHandle(page) {
      this.$emit("current-change", page);
    },
  },
};
</script>

<style>
.page-item {
  height: 20px;
  border: 1px solid #000;
  padding: 5px 10px;
  margin: 5px;
}
</style>